<template>
    <div class="z-direction file-info">
        <pui-dialog :maskClick="false" :title="`${componentRef.edit}=μm`" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form">
                    <div class="form-item">
                        <div class="label">{{componentRef.edit}}方向</div>
                        <pui-input :placeholder="`请输入${componentRef.edit}方向数值`" v-model="componentRef.length" type="input" clearAble full></pui-input>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="changeFigure">确定</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: 'Z=μm'
    },
    animate: {
        type: String,
        default: 'fade'
    },
})
const emit = defineEmits({
    onClose: (val: any) => {},
    changeFigure: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    type: 'z',
    edit: 'z',
    length: 0
}) as any
const init = (e: any) => {
    componentRef.dialogVisible = true
    componentRef.type = e.type
    componentRef.edit = e.edit
}
const changeFigure = async () => {
    const res: any = await deviceManager.getFigure(componentRef.edit, componentRef.length, componentRef.type.indexOf('Refractive') > -1 ? 'Refractive Index View' : 'Sectional View')
    deviceManager.figures.get(deviceManager.photGridId)[componentRef.type] = res
    emit('changeFigure', res)
    closeDialog()
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>